<template>
  <div>
    <!-- 选择表 2018/3/7 11:44 zhangQ -->
    <Select @on-change="changeDB" style="margin-bottom: 15px;">
      <template v-for="item in dbList">
        <Option :value="item.connName" :key="item.connName">{{ item.connName }}</Option>
      </template>
    </Select>

    <Table ref="tableListRef" border :columns="tables.columns" :data="tables.data" highlight-row @on-current-change="currentTableChange" height="200"></Table>
  </div>
</template>

<script>
  import initDb from '@/components/common/indexeddbUtil'
  // import DbServer from '@/components/common/dbServer'
  import { queryTbaleObj } from './generationUtil'
  import _ from 'lodash'
  import mysqlDBHelpler from '@/components/common/mysqlDBHelper'

  export default {
    name: 'checkTables',
    data () {
      let dbList = []
      let tables = {
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '表名',
            key: 'tableName'
          },
          {
            title: '操作',
            render: (h, params) => {
              let checkBtn = (<i-button type="primary" onClick={() => this.checkTable(params.row)}>选择</i-button>)
              return ([checkBtn])
            }
          }
        ],
        data: []
      }
      let datas = { dbList, tables }
      return datas
    },
    computed: {},
    methods: {
      changeDB (val) {
        // 清除选中行
        this.$refs['tableListRef'].clearCurrentRow()
        this.tables.data = []
        let config = _.find(this.dbList, { 'connName': String(val) })
        // 获得配置信息，查询数据
        mysqlDBHelpler.executeQuery('show tables', config)
          .then(({ res, fields }) => {
            res.forEach((row) => {
              this.tables.data.push({ tableName: row[fields[0].name] })
            })
            this.$store.dispatch('generation/setDataSource', config)
          })
          .catch((ex) => {
            this.$Notice.error({
              title: '获取失败',
              desc: ex
            })
          })
      },
      currentTableChange () {
      },
      checkTable (row) {
        queryTbaleObj(row.tableName)
          .then(res => {
            this.$store.dispatch('generation/setTables', [res])
            this.$emit('close')
          })
          .catch(ex => {
            this.$Notice.error({
              title: '获取表对象失败',
              desc: ex
            })
            this.$emit('close')
          })
      }
    },
    created () {
    },
    mounted () {
      this.dbList = []
      let that = this
      initDb(contant.storeNames.connStore.name)
        .then((store) => {
          let cursor = store.openCursor()
          cursor.onsuccess = (e) => {
            let res = e.target.result
            if (res && res.value) {
              if (res.value.connName) {
                that.dbList.push(res.value)
              }
              res.continue()
              // 5-continue方法将光标移到下一个数据对象，如果当前数据对象已经是最后一个数据了，则光标指向null。
            }
          }
        })
    },
    components: {}
  }
</script>

<style scoped>

</style>